<template>
	<div class="hContent">
				<div class="hRight">
					<img src="../../../assets/adimg/phone.jpg" class="adversize"/>
				<div class="hwine" v-for="item in items2">
						<h3 class="title" >
							<a href="javascript:void(0)">{{item.name}}</a>
						</h3>
						<ul class="hwine_content">
							<li class="hwine_content_" v-for="(i,d) in item.mm">
								<a href="#/sales" >
									<img :src='i.src' class="himg"/>
									{{i.title}}
								</a>
							</li>
							
						</ul>
						
				
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: "Rcontent",
		data() {
			return {
				items2: [{
					name: "大家电",
					mm: [{
						src: require("../../../assets/dianzi/pingban.png"),
						title: "平板电视"
					}, {
						src: require("../../../assets/dianzi/bingxiang.png"),
						title: "冰箱"
					}, {
						src: require("../../../assets/dianzi/kongtiao.png"),
						title: "空调"
					}]
				}, {
					name: "数码通讯",
					mm: [{
						src: require("../../../assets/dianzi/shouji.png"),
						title: "手机"
					}, {
						src: require("../../../assets/dianzi/bijiben.png"),
						title: "笔记本电脑"
					}, {
						src: require("../../../assets/dianzi/danfan.png"),
						title: "单反相机"
					}]
				}, {
					name: "数码通讯",
					mm: [{
						src: require("../../../assets/dianzi/shouji.png"),
						title: "手机"
					}, {
						src: require("../../../assets/dianzi/bijiben.png"),
						title: "笔记本电脑"
					}, {
						src: require("../../../assets/dianzi/danfan.png"),
						title: "单反相机"
					}]
				}, {
					name: "数码通讯",
					mm: [{
						src: require("../../../assets/dianzi/shouji.png"),
						title: "手机"
					}, {
						src: require("../../../assets/dianzi/bijiben.png"),
						title: "笔记本电脑"
					}, {
						src: require("../../../assets/dianzi/danfan.png"),
						title: "单反相机"
					}]
				}, {
					name: "数码通讯",
					mm: [{
						src: require("../../../assets/dianzi/shouji.png"),
						title: "手机"
					}, {
						src: require("../../../assets/dianzi/bijiben.png"),
						title: "笔记本电脑"
					}, {
						src: require("../../../assets/dianzi/danfan.png"),
						title: "单反相机"
					}]
				}]
			}
		}
	}
</script>

<style scoped>
	a{
		color: gray;
	}
	.hContent {
		width: 100%;
	}
	.hRight {
		position: absolute;
		width: 74%;
		left: 23%;
		padding: 0.5rem;
		top: 38px;
		border-top: 1px solid #ccc;
	}
	
	.title {
		color: grey;
	}
	
	.hwine {
		margin-bottom: 0.2rem;
	}
	.hwine_content {
		padding-left: 0.7rem;
		display: flex;
		flex-wrap: wrap;
		margin-top: 0.5rem;
	}
	
	.hwine_content li {
		width: 30%;
		text-align: center;
		padding: 0.25rem 0;
		background: rgba(204, 204, 204, 0.3) ;		
		transition: opacity 0.3s;
		display: inline-block;
		margin-top: 1.2%;
		margin-right: 0.6rem;
	}
	
	.himg {
		width: 5rem;
		margin: 0 auto;
		display: block;
	}
	
	.hwine_content li a {
		color: grey;
		text-decoration: none;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}
	.adversize {
		width: 100%;
	}
</style>